<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听属性</title>
    <script src="/js/vue-2.7.9-dev.js"></script>
</head>
<body>
    <div id="app">
        <h2>今天天气很 {{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <button @click="changeAge">改变年龄</button>
    </div>

    <script>
        let vm = new Vue({
            data() { 
                return { 
                    info:"",
                    isHot: true,
                    person:{
                        age:18
                    }
                }
            },
            methods: {
                changeWeather(){
                    console.log("this对象是 ", this);
                    console.log("isHot的值",this.isHot);
                    this.isHot = !this.isHot
                },
                changeAge(){
                    // this.person.age = 15
                    this.person = {age:15}
                }
            },
            watch:{
                // 注意, 侦听属性 只能侦听已有的属性 包括 data 计算属性
                isHot:{
                    immediate: true,
                    handler(newValue, oldValue){
                        console.log("isHot 新的值", newValue, "   旧的值", oldValue);
                        if(newValue){
                            this.info = "晴朗"
                        }else{
                            this.info = "多云"
                        }
                    }
                },
                // person:{
                //     // 深度监听
                //     deep:true,
                //     handler(newValue, oldValue){
                //         console.log("person 新的值", newValue, "   旧的值", oldValue);
                //     }
                // },
                // 简写方式
                person(newValue, oldValue){
                    console.log("person 新的值", newValue, "   旧的值", oldValue);
                    window.setTimeout(()=>{
                        console.log("this对象是 ", this);
                        alert("监听到了person的变化, 延时执行")
                    }, 1000);
                }
            }
        })
        vm.$mount("#app")
        console.log("--",vm);
        console.log("isHot 的初识化",vm.isHot);
        console.log(window);
    </script>
</body>
</html>